<template>
  <div class='chat-header'>
    <h1>Online：（{{Chat.onlineCount}}）</h1>
    <div class='gotoai' @click='gotoai'>点这里去找机器人哦</div>
    <group-info-body></group-info-body>
  </div>
</template>

<script>
import Chat from '../api/client'
import GroupInfoBody from './GroupInfoBody'
export default {
  name: 'chat-header',
  data () {
    return {
      msg: 'header',
      Chat: Chat
    }
  },
  components: {
    GroupInfoBody
  },
  methods: {
    gotoai () {
      this.$router.push({path: '/ai', query: {refresh: true}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gotoai{
  height:40px;
  text-align: center;
  margin:10px 0 5px;
  line-height:40px;
  color:#fff;
  background: -webkit-linear-gradient(left top, #00cccc , #3CAF36);
  background: -o-linear-gradient(top right, #00cccc, #3CAF36);
  background: -moz-linear-gradient(top right, #00cccc, #3CAF36);
  background: linear-gradient(to top right, #00cccc , #3CAF36);
}
.chat-header{
  position:absolute;
  background:#FFF;
  width:23%;
  top:50px;
  bottom:50px;
  left:5%;
}
.chat-header h1{
  text-align:center;
  font-size:14px;
  font-weight:normal;
  line-height:20px;
  padding:2% 0;
  border-bottom:1px solid #ccc;
}
</style>
